<template>
	<div>
		<el-form :model="searchData" ref="ruleForm" inline  size="small">
			<el-form-item>
				<el-select v-model="searchData.school_id" placeholder="请选择所属学校" clearable size="small">
					<el-option v-for="item in schoolData" :key="item.id" :label="item.school_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				<el-select v-model="searchData.level" placeholder="请选择作品等级" clearable size="small">
					<el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				<el-input type="text" v-model="searchData.key" placeholder="请输入关键字" clearable size="small"></el-input>
			</el-form-item>
			<el-form-item class="search">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getWorkList">搜索</el-button>
			</el-form-item>
		</el-form>
		
		
		<div class="table-wrap">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="name" label="作品名称" align="center">
					<template slot-scope="scope">
						<span class="name" @click.stop='previewModel(scope.row)'>{{scope.row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="schoolname" label="所属学校" align="center"></el-table-column>
				<el-table-column prop="teachername" label="教师姓名" align="center"></el-table-column>
				<el-table-column prop="realname" label="学生姓名" align="center"></el-table-column>
				<el-table-column prop="class_name" label="所属班级" align="center"></el-table-column>
				<el-table-column prop="score" label="作品分数" align="center"></el-table-column>
				<el-table-column prop="status" label="作品等级" align="center">
					<template slot-scope="scope">
						{{scope.row.level | levelMap}}
					</template>
				</el-table-column>
				<el-table-column prop="desc" label="描述" align="center"></el-table-column>
			</el-table>
		</div>

		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange"
			@page-change="handlePageChange"></common-pagination>
		<model-render :visible.sync="isShowModel" :model_id="model_id" @close="isShowModel = false"></model-render>
	</div>
</template>

<script>
	import CommonPagination from '@/components/CommonPagination';
	import modelRender from './components/modelRender';
	import {
		schoolList
	} from '@/api/school';
	import {
		workList
	} from '@/api/work';
	import {
		levelList
	} from '@/jslibs/enum';
	export default {
		name: 'messagepush',
		data() {
			return {
				levelList,
				tableData: [],
				total: 0,
				searchData: {
					school_id:"",
					key:'',
					level:"",
					user_id:"",
					page: 1, //第几页
					size: 10,
				},
				schoolData:[],
				model_id:"",
				isShowModel:false
			}
		},

		mounted() {
			this.getSchoolList()
			this.getWorkList();
		},

		methods: {
			async getWorkList() {
				const {
					status,
					data
				} = await workList(this.searchData);
				if (status !== 200) return
				if (data.code == 200) {
					this.tableData = data?.data?.list || [];
					this.total = data?.data?.total || 0;
				} else {
					this.tableData = [];
					this.total = 0
					this.$message.warning(data?.message || '获取失败');
				}
			},
			
			async getSchoolList() {
				const {
					status,
					data
				} = await schoolList({page: 1,size: 1000});
				if (status !== 200) return
				if (data.code == 200) {
					this.schoolData = data?.data?.list || [];
				} else {
					this.schoolData = [];
					this.$message.warning(data?.message || '获取失败');
				}
			},
			previewModel(item){
				this.isShowModel = true;
				this.model_id = item.id;
			},
			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getWorkList();
			},
			handlePageChange(page) {
				this.searchData.page = page;
				this.getWorkList();
			}
		},

		components: {
			CommonPagination,
			modelRender
		}
	}
</script>

<style lang="less" scoped>
	@import '~@/assets/styles/variables.less';

	.header {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 20px;
	}
	.search{
		float: right;
	}
	.name{
		cursor: pointer;
		color: #FF8A00;
	}
</style>